<template>
    <div>
        <h3>会员增加</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">会员编号</td>
                    <td><input type="text" v-model="queryInfo.UserCode" disabled/></td>
                </tr>
                <tr>
                    <td align="right">会员姓名</td>
                    <td><input type="text" v-model="queryInfo.UserName"/></td>
                </tr>
                <tr>
                    <td align="right">会员手机号</td>
                    <td><input type="text" v-model="queryInfo.Phone" maxlength="11"/></td>
                </tr>
                <tr>
                    <td align="right">身份证号</td>
                    <td><input type="text" v-model="queryInfo.Code" maxlength="18" /></td>
                </tr>
                <tr>
                    <td align="right">会员性别</td>
                    <td><input type="radio" name="sex" :value="1" v-model="queryInfo.Sex"  />男
                        <input type="radio" name="sex" :value="0" v-model="queryInfo.Sex" />女
                    </td>
                </tr>
                <tr>
                    <td align="right">会员状态</td>
                    <td><input type="radio" name="state" :value="1" v-model="queryInfo.State" />可用
                        <input type="radio" name="state" :value="0" v-model="queryInfo.State" />冻结
                    </td>
                </tr>
                <tr>
                    <td align="right">会员积分</td>
                    <td><input type="text" v-model="queryInfo.JiFen" /></td>
                </tr>
                <tr>
                    <td align="right">会员余额</td>
                    <td><input type="text" v-model="queryInfo.Money" /></td>
                </tr>
                <tr>
                    <td align="right">会员等级</td>
                    <td>
                        <select v-model="queryInfo.LevelId">
                            <option value="">请选择</option>
                            <option :value="item.Id" v-for="item in data">{{ item.LevelName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="增加" class="btn btn-success" @click="ok"/></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive,ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
let router=useRouter();
import moment from 'moment';
let num = parseInt(Math.random()*900+100)
let queryInfo=reactive({
  'UserCode': moment(new Date()).format('YYYYMMDDHH')+num,
  'UserName': '',
  'Phone': '',
  'Code': '',
  'Sex': 1,
  'State': 1,
  'JiFen': 0,
  'Money': 0,
  'LevelId': '',
});
//增加会员
const ok=()=>{
    if(queryInfo.UserName==""){
        alert("用户名不能为空!");
        return;
    }
    if(queryInfo.Phone==""){
        alert("手机号不能为空!");
        return;
    }
    let reg=/^1[3-9]\d{9}$/g;//手机号正则
    if(reg.test(queryInfo.Phone)==false){
        alert("手机号格式不正确!");
        return;
    }
    if(queryInfo.Code==""){
        alert("身份证号码不能为空！");
        return;
    }
    let reg1=/^[1-9]\d{5}(19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}[0-9xX]$/;
    if(reg1.test(queryInfo.Code)==false){
        alert("身份证格式不正确!");
        return;
    }
    if(queryInfo.JiFen < 0){
        alert("积分只能大于等于0");
        return;
    }
    if(queryInfo.Money < 0){
        alert("余额只能大于等于0");
        return;
    }
    if(queryInfo.LevelId==""){
        alert("等级必须选择!");
        return;
    }
    //1.有效验证2.发送网络请求
    axios({
        url:'https://localhost:7035/api/ZMember/AddUSer',
        method:'post',
        data:queryInfo
    })
    .then((res)=>{
        console.log("res");
        if(res.data>0){
            alert("成功!");
            router.push("/userList")
        }
        
    })
    .catch((err)=>{
        console.log("err");
    })
}
let data:any=ref([]);
onMounted(() => {
    getList();
});
const getList = () => {
    axios({
        url: 'https://localhost:7035/api/ZMember',
        method: 'get',

    })
    .then((res)=>{
        console.log(res);
        data.value=res.data;
    })
    .catch((err)=>{
        console.log(err);
    });
}
</script>

<style scoped>

</style>